<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>excel导入数据库测试</title>
    <link href="../layui/css/layui.css" rel="stylesheet">
    <link href="../icon/excel/iconfont.css" rel="stylesheet">
    <script src="../icon/excel/iconfont.js"></script>

    <style>
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div style="width: 240px;">
    <div class="layui-upload-drag" id="excelUpLoad">
        <i class="layui-icon"></i>
        <p>点击上传，或将文件拖拽到此处</p>
    </div>
    <div style="width: 100%;display: none" id="aa">
        <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
            <div class="layui-progress-bar" lay-percent=""></div>
        </div>
    </div>
</div>

<!--
<button type="button" class="layui-btn layui-btn-primary" id="excelUpLoad">
    <svg class="icon" aria-hidden="true" style="font-size: 20px;">
        <use xlink:href="#icon-excel-ext"></use>
    </svg>
    上传文件
</button>-->


</body>

<script src="../layui/layui.js" type="text/javascript"></script>
<script>
    layui.use(['upload', 'element', 'layer'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;

        //常规使用
        var uploadInst = upload.render({
            elem: '#excelUpLoad'
            , url: '/exceltest' //上传接口
            , accept: 'file'
            , exts: 'xls|xlsx|xlsm|xlt|xltx|xltm'
            , before: function () {
                $("#aa").show();
            }
            , done: function (res) {
                if (res.code == "200") {
                    layer.msg(res.msg, {icon: 1});
                } else if (res.code == "201") {
                    layer.msg(res.msg, {icon: false});
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }
            , error: function () {
                layer.msg("上传失败", {icon: 2});
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    // layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    });
</script>
</html>